{% extends 'layout/base.html' %}
{% load static %}
{% load custom_tag %}
{% block title %}{{ article.title }} | {% endblock %}
{% block css %}

	<link rel="stylesheet" href="{% static 'css/prism-tomorrow.css' %}" type="text/css">
	<link rel="stylesheet" href="{% static 'css/prism-line-numbers.css' %}" type="text/css">
{% endblock %}
{% block banner %}
	<div class="bg-cover index-back pd-header post-cover">
		<div class="container" style="right: 0px;left: 0px;">
			<div class="row">
				<div class="col s12 m12 l12">
					<div class="brand">
						<h1 class="description center-align post-title">{{ article.title }}</h1>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
        {#$('.bg-cover').css('background-image', 'url({{ article.cover }})');#}
	</script>
{% endblock %}

{% block contents %}
	<main class="post-container content">
		<link rel="stylesheet" href="{% static 'css/tocbot.css' %}">
		<style>
            #articleContent h1::before,
            #articleContent h2::before,
            #articleContent h3::before,
            #articleContent h4::before,
            #articleContent h5::before,
            #articleContent h6::before {
                display: block;
                content: " ";
                height: 100px;
                margin-top: -100px;
                visibility: hidden;
            }

            #articleContent :focus {
                outline: none;
            }

            .toc-fixed {
                position: fixed;
                top: 64px;
            }

            .toc-widget {
                width: 345px;
                padding-left: 20px;
                background-color: rgb(255, 255, 255);
                border-radius: 10px;
                box-shadow: 0 10px 35px 2px rgba(0 ,0 ,0,15%), 0 5px 15px rgba(0 ,0 ,0, 7%), 0 2px 5px -5px rgba(0, 0, 0, 10%) !important;
                overflow: hidden;
            }

            .toc-widget .toc-title {
                margin: 35px 0 15px 0;
                padding-left: 17px;
                font-size: 1.5rem;
                font-weight: bold;
                line-height: 1.5rem;
            }

            .toc-widget ol {
                padding: 0;
                list-style: none;
            }

            #toc-content {
                height: auto;
                overflow: auto;
	            padding: 20px 0;

            }

            #toc-content ol {
                padding-left: 10px;
            }

            #toc-content ol li {
                padding-left: 10px;
            }

            #toc-content .toc-link:hover {
                color: #42b983;
                font-weight: 700;
                text-decoration: underline;
            }

            #toc-content .toc-link::before {
                background-color: transparent;
                max-height: 25px;
            }

            #toc-content .is-active-link {
                color: #42b983;
            }

            #toc-content .is-active-link::before {
                background-color: #42b983;
            }

            #floating-toc-btn {
                position: fixed;
                right: 15px;
                bottom: 76px;
                padding-top: 15px;
                margin-bottom: 0;
                z-index: 998;
            }

            #floating-toc-btn .btn-floating {
                width: 48px;
                height: 48px;
            }

            #floating-toc-btn .btn-floating i {
                line-height: 48px;
                font-size: 1.4rem;
            }
		</style>
		<div class="row">
			<div id="main-content" class="col s12 m12 l9">
				<!-- 文章信息-->
				<div id="artDetail">
					<div class="card">
						<div class="card-content article-info">
							<div class="row tag-cate">
								<div class="col s7">
									<div class="article-tag">
										{% for tag in article.tag.all %}
											<a href="{% url 'article_tag' tag.id %}">
												<span class="chip bg-color">{{ tag.name }}</span>
											</a>
										{% endfor %}
									</div>
								</div>
								<div class="col s5 right-align">
									<div class="post-cate">
										<i class="fas fa-bookmark fa-fw icon-category"></i>
										<a href="{% url 'article_category' article.category_id %}"
										   class="post-category">{{ article.category }}</a>
									</div>
								</div>
							</div>
							<div class="post-info">
								<div class="post-date info-break-policy">
									<i class="far fa-calendar-minus fa-fw"></i>发布日期:&nbsp;&nbsp;{{ article.add_time }}
								</div>
								<div class="post-date info-break-policy">
									<i class="far fa-calendar-check fa-fw"></i>更新日期:&nbsp;&nbsp;{{ article.update_time }}
								</div>
								<div id="busuanzi_container_page_pv" class="info-break-policy">
									<i class="far fa-eye fa-fw"></i>阅读次数:&nbsp;&nbsp;{{ article.click_count }}
									{#                            <span id="busuanzi_value_page_pv"></span>#}
								</div>
							</div>
						</div>
						<hr class="clearfix">
						<!--文章内容-->
						<div class="card-content article-card-content">
							<div id="articleContent">
								{{ article_detail_html|custom_markdown| safe }}
							</div>
							<hr/>

							<!--版权信息-->
							<div class="reprint" id="reprint-statement">
								<div class="reprint__author">
            <span class="reprint-meta" style="font-weight: bold;">
                <i class="fas fa-user">
                    文章作者:
                </i>
            </span>
									<span class="reprint-info">
                <a href="https://jwt1399.top" rel="external nofollow noreferrer">{{ article.author }}</a>
            </span>
								</div>
								<div class="reprint__type">
            <span class="reprint-meta" style="font-weight: bold;">
                <i class="fas fa-link">
                    文章链接:
                </i>
            </span>
									<span class="reprint-info">
                <a href="{% url 'article_detail' article.id %}">{% url 'article_detail' article.id %}</a>
            </span>
								</div>
								<div class="reprint__notice">
            <span class="reprint-meta" style="font-weight: bold;">
                <i class="fas fa-copyright">
                    版权声明:
                </i>
            </span>
									<span class="reprint-info">
                本博客所有文章除特別声明外，均采用
                <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer"
                   target="_blank">CC BY 4.0</a>
                    许可协议。转载请注明来源
                <a href="/" target="_blank">{{ SITE_NAME }}</a>!
            </span>
								</div>
							</div>

							<!--复制弹出转载规则-->
							<script async defer>
                                document.addEventListener("copy", function (e) {
                                    let toastHTML = '<span>复制成功，请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>';
                                    M.toast({html: toastHTML})
                                });

                                function navToReprintStatement() {
                                    $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
                                }
							</script>

							<div class="tag_share" style="display: block;">
								<div class="post-meta__tag-list" style="display: inline-block;">
									<div class="article-tag">
										{% for tag in article.tag.all %}
											<a href="{% url 'article_tag' tag.id %}">
												<span class="chip bg-color">{{ tag }}</span>
											</a>
										{% endfor %}
									</div>
								</div>

								<!--分享功能-->

								<div class="post_share"
								     style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
									<link rel="stylesheet" href="{% static 'plugin/share/css/share.min.css' %}"
									      type="text/css">
									<div id="article-share">
										<div class="social-share" data-sites="qq,qzone,wechat,weibo"
										     data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div>
										<script src="{% static 'plugin/share/js/social-share.min.js' %}"></script>
									</div>
								</div>
							</div>


							<link rel="stylesheet" href="{% static 'css/reward.css' %}" type="text/css">
							<!--打赏功能-->
							<div id="reward">
								<a href="#rewardModal"
								   class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red">赏</a>
								<!-- Modal Structure -->
								<div id="rewardModal" class="modal">
									<div class="modal-content">
										<a class="close modal-close"><i class="fas fa-times"></i></a>
										<h4 class="reward-title">你的赏识是我前进的动力</h4>
										<div class="reward-content">
											<div class="reward-tabs">
												<ul class="tabs row">
													<li class="tab col s6 alipay-tab waves-effect waves-light"><a
															href="#alipay">支付宝</a></li>
													<li class="tab col s6 wechat-tab waves-effect waves-light"><a
															href="#wechat">微 信</a></li>
												</ul>
{#												<div id="alipay">#}
{#													<img src="https://jwt1399.top/medias/reward/alipay.png"#}
{#													     class="reward-img" alt="支付宝打赏二维码">#}
{#												</div>#}
{#												<div id="wechat">#}
{#													<img src="https://jwt1399.top/medias/reward/wechat.png"#}
{#													     class="reward-img" alt="微信打赏二维码">#}
{#												</div>#}
											</div>
										</div>
									</div>
								</div>
							</div>

							<script>
                                $(function () {
                                    $('.tabs').tabs();
                                });
							</script>

						</div>
					</div>
					<!--valine评论-->
					<link rel="stylesheet" href="{% static 'plugin/valine/valine.css' %}" type="text/css">
					<div class="card valine-card" data-aos="fade-up">
						<div class="comment_headling"
						     style="font-size: 20px; font-weight: 700; position: relative; left: 20px; top: 15px; padding-bottom: 5px;">
							<i class="fas fa-comments fa-fw" aria-hidden="true"></i>
							<span>评论-----昵称和邮箱必填，网址选填</span>
						</div>
						<div id="vcomments" class="card-content" style="display: grid"></div>
					</div>
					<script src="{% static 'plugin/valine/av-min.js' %}"></script>
					<script src="{% static 'plugin/valine/Valine.min.js' %}"></script>

					<script>
                        new Valine({
                            el: '#vcomments',
                            appId: '{{valine.appid}}',
                            appKey: '{{valine.appkey}}',
                            notify: 'false' === 'true',
                            verify: 'false' === 'true',
                            visitor: 'true' === 'true',
                            avatar: '{{ valine.avatar }}',
                            pageSize: '{{valine.pagesize}}',
                            lang: 'zh-cn',
                            placeholder: '{{ valine.placeholder }}'
                        });
					</script>

				</div>

				<script>
                    $('#articleContent').on('copy', function (e) {
                        // IE8 or earlier browser is 'undefined'
                        if (typeof window.getSelection === 'undefined') return;

                        var selection = window.getSelection();
                        // if the selection is short let's not annoy our users.
                        if (('' + selection).length < Number.parseInt('100')) {
                            return;
                        }

                        // create a div outside of the visible area and fill it with the selected text.
                        var bodyElement = document.getElementsByTagName('body')[0];
                        var newdiv = document.createElement('div');
                        newdiv.style.position = 'absolute';
                        newdiv.style.left = '-99999px';
                        bodyElement.appendChild(newdiv);
                        newdiv.appendChild(selection.getRangeAt(0).cloneContents());

                        // we need a <pre> tag workaround.
                        // otherwise the text inside "pre" loses all the line breaks!
                        if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') {
                            newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
                        }

                        var url = document.location.href;
                        console.log("111111111",document.location,url);
                        newdiv.innerHTML += '<br />'
                            + '来源: {{ SITE_NAME }}<br />'
                            + '文章作者: {{article.author}}<br />'
                            + '文章链接: <a href="' + url + '">' + url + '</a><br />'
                            + '本文章著作权归作者所有，任何形式的转载都请注明出处。';

                        selection.selectAllChildren(newdiv);
                        window.setTimeout(function () {
                            bodyElement.removeChild(newdiv);
                        }, 200);
                    });
				</script>

				<!-- 代码块功能依赖 -->
				<script type="text/javascript" src="{% static 'plugin/codeBlock/codeBlockFuction.js' %}"></script>
				<!-- 代码语言 -->
				<script type="text/javascript" src="{% static 'plugin/codeBlock/codeLang.js' %}"></script>
				<!-- 代码块复制 -->
				<script type="text/javascript" src="{% static 'plugin/codeBlock/codeCopy.js' %}"></script>
				<!-- 代码块收缩 -->
				<script type="text/javascript" src="{% static 'plugin/codeBlock/codeShrink.js' %}"></script>
				<!-- 代码块折行 -->
				<style type="text/css">code[class*="language-"], pre[class*="language-"] {
                    white-space: pre !important;
                }</style>
			</div>

			<div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
				<div class="toc-widget">
					<div class="toc-title"><i class="far fa-list-alt"></i>&nbsp;&nbsp;目录</div>
					<div id="toc-content"></div>
				</div>
			</div>

		</div>

		<!-- TOC 悬浮按钮. -->
		<div id="floating-toc-btn" class="hide-on-med-and-down">
			<a class="btn-floating btn-large bg-color">
				<i class="fas fa-list-ul"></i>
			</a>
		</div>
		<script src="{% static 'js/tocbot.min.js' %}"></script>
		<script>
            $(function () {
                tocbot.init({
                    tocSelector: '#toc-content',
                    contentSelector: '#articleContent',
                    headingsOffset: -($(window).height() * 0.4 - 45),
                    collapseDepth: Number('0'),
                    headingSelector: 'h2, h3, h4'
                });

                // modify the toc link href to support Chinese.
                let i = 0;
                let tocHeading = 'toc-heading-';
                $('#toc-content a').each(function () {
                    $(this).attr('href', '#' + tocHeading + (++i));
                });

                // modify the heading title id to support Chinese.
                i = 0;
                $('#articleContent').children('h2, h3, h4').each(function () {
                    $(this).attr('id', tocHeading + (++i));
                });

                // Set scroll toc fixed.
                let tocHeight = parseInt($(window).height() * 0.4 - 64);
                let $tocWidget = $('.toc-widget');
                $(window).scroll(function () {
                    let scroll = $(window).scrollTop();
                    /* add post toc fixed. */
                    if (scroll > tocHeight) {
                        $tocWidget.addClass('toc-fixed');
                    } else {
                        $tocWidget.removeClass('toc-fixed');
                    }
                });


                /* 修复文章卡片 div 的宽度. */
                let fixPostCardWidth = function (srcId, targetId) {
                    let srcDiv = $('#' + srcId);
                    if (srcDiv.length === 0) {
                        return;
                    }

                    let w = srcDiv.width();
                    if (w >= 450) {
                        w = w + 21;
                    } else if (w >= 350 && w < 450) {
                        w = w + 18;
                    } else if (w >= 300 && w < 350) {
                        w = w + 16;
                    } else {
                        w = w + 14;
                    }
                    $('#' + targetId).width(w);
                };

                // 切换TOC目录展开收缩的相关操作.
                const expandedClass = 'expanded';
                let $tocAside = $('#toc-aside');
                let $mainContent = $('#main-content');
                $('#floating-toc-btn .btn-floating').click(function () {
                    if ($tocAside.hasClass(expandedClass)) {
                        $tocAside.removeClass(expandedClass).hide();
                        $mainContent.removeClass('l9');
                    } else {
                        $tocAside.addClass(expandedClass).show();
                        $mainContent.addClass('l9');
                    }
                    fixPostCardWidth('artDetail', 'prenext-posts');
                });

            });
		</script>

	</main>
{% endblock %}

{% block js %}

{% endblock %}